import React, {useMemo} from 'react'
import CategoryListRender from '../CategoryListRender';
import {getWidthMultiple} from './utils'
import type { ICategorySelect } from '../content';
import type { ISearchData } from '../../../../designer/service';

export default function CategoryLeftItem({
  item,
  selected,
  index,
  onSelected,
  config,
  style,
  parentItem,
}: {
  selected: string[];
  index: number;
  onSelected: ICategorySelect;
  item: ISearchData['SectionList'][number];
  config: any;
  style?: any;
  parentItem: any;
}) {
  const widthMultiple = useMemo(() => {
    return getWidthMultiple(item.sectionItemList.length);
  }, [item.sectionItemList?.length]);

  const sectionLIst = useMemo(() => {
    return item.sectionItemList;
  }, [item.IsGroup, item.SectionGroupData, item.sectionItemList]);
  return (
    <div
      className={`categoryAll ${(sectionLIst?.length || 0) > 5 ? 'categoryhover' : ''}`}
      //@ts-ignore
      style={{ '--width-multiple': widthMultiple }}
    >
      <CategoryListRender
        config={config}
        IsWhether={parentItem.IsWhether}
        item={item}
        selected={selected}
        onSelected={onSelected}
        level={index}
        parentItem={parentItem}
      />
    </div>
  );
}